import { useState, useEffect, useMemo } from 'react';
import { Table, Form } from 'com';
import menuStore from 'store/menu';
import { SearchArchives } from 'api/students';
import { getStudentRecords } from 'api/dictionary';
import dayjs from 'dayjs';

/**
 * 列
 */
const cols = [
    {
        title: '学生姓名',
        dataIndex: 'student_name',
        align: 'center'
    },
    {
        title: '档案类型',
        dataIndex: 'archives_name',
        align: 'center'
    },
    {
        title: '日期',
        dataIndex: 'date',
        align: 'center',
        render: text => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
    },
    {
        title: '备注',
        dataIndex: 'remark',
    }
]

export default () => {
    /**
        * 列表
        */
    const [list, setList] = useState([]);
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);
    /**
     * 总条数
     */
    const [total, setTotal] = useState(0);
    /**
     * 记录
     */
    const [records, setRecords] = useState([{ label: '所有', value: 0 }]);
    /**
     * 搜索表单配置项
     */
    const options = useMemo(() => ({
        student_id: {
            title: '学生',
            tag: 'ss',
            clear: true
        },
        start_date: {
            title: '开始日期',
            tag: 'date'
        },
        end_date: {
            title: '结束日期',
            tag: 'date'
        },
        record: {
            title: '档案类型',
            tag: 'select',
            style: { width: 110 },
            values: records
        },
        search: {
            tag: 'button',
            text: '搜索',
            loading,
            htmlType: 'submit',
            type: 'primary'
        }
    }), [loading, records]);

    /**
     * 搜索模型
     */
    const [searchModel, setSearchModel] = useState({
        pageNo: 1,
        pageSize: 10,
        record: 0
    });

    menuStore.auth('studentEmergencyList') && useEffect(() => {
        (async () => {
            setLoading(true);
            try {
                const obj = { ...searchModel };
                if (obj.start_date) {
                    obj.start_date = dayjs(obj.start_date).format('YYYY-MM-DD');
                }
                if (obj.end_date) {
                    obj.end_date = dayjs(obj.end_date).add(1, 'day').format('YYYY-MM-DD');
                }
                const { data, total } = await SearchArchives(obj);
                setList(data);
                setTotal(total);
            } catch (error) { }
            setLoading(false);
        })()
    }, [searchModel]);

    menuStore.auth('studentEmergencyList') && useEffect(() => {
        (async () => {
            try {
                const list = await getStudentRecords();
                setRecords([...records, ...list.map(c => ({ label: c.name, value: c.id }))]);
            } catch (error) { }
        })()
    }, []);

    return <div>
        <h3>学生档案管理</h3>
        <hr />
        {menuStore.auth('studentEmergencyList') && <Form options={options} values={searchModel} attrs={{ layout: "inline" }} onFinish={v => setSearchModel({ ...searchModel, ...v, pageNo: 1 })} />}
        <p></p>
        {menuStore.auth('studentEmergencyList') && <Table cols={cols} data={list} loading={loading} total={total} page={searchModel} onChange={setSearchModel} />}
    </div>
}